<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="opentagkey"
          >配置</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="tableData">
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.prop"
        :width="column.width"
        :align="column.align"
      >
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />

    <el-dialog
      :visible.sync="tagkeyVisible"
      width="550px"
      append-to-body
      v-if="tagkeyVisible"
    >
      <el-form ref="form" :model="formData" label-position="top" :inline="true">
        <el-form-item style="width: 200px" label="数据库表名">
          <el-input
            v-model="formData.tableName"
            placeholder="请输入数据库表名"
            @blur="tableNameExp"
          />
        </el-form-item>
        <el-form-item style="width: 200px" label="表名">
          <el-input v-model="formData.comment" placeholder="请输入表名" />
        </el-form-item>

        <!-- <el-form-item style="width: 100px" label="字段类型"></el-form-item> -->
        <div class="el-dialog-div">
          <el-form-item
            v-for="(item, index) in formData.libraryIdList"
            :key="index"
          >
            <el-input
              :disabled="true"
              style="width: 150px"
              v-model="item.fieldName"
            ></el-input>
            <el-input
              style="width: 150px"
              v-model="item.comment"
              placeholder="请输入字段名"
            ></el-input>
            <!-- <el-input
              style="width: 150px"
              v-model="item.fieldType"
              placeholder="请输入字段类型"
            ></el-input> -->
            <el-select
              v-model="item.fieldType"
              clearable
              placeholder="字段类型"
              style="width: 150px"
            >
              <el-option
                v-for="(val, i) in columnTypeList"
                :key="i"
                :label="val"
                :value="val"
              />
            </el-select>

            <!-- <span v-if="formData.libraryIdList.length > 1">
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(item, index)"
                >删除</el-button
              >
            </span> -->
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { checkIfTableExists } from "@/api/conf/SysTableData";
import { queryData, createTableInfo } from "@/api/conf/BiSqlFirstField";
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      columnTypeList: [
        "double",
        "int",
        "bigint",
        "varchar",
        "date",
        "datetime",
        "text",
      ],
      formData: {
        libraryIdList: [],
      },
      tagkeyVisible: false,
      // 查询参数
      queryParams: {
        page: 1,
        size: 10,
      },
      tableData: [
        // 数据略
      ],
      cols: [],
      columns: [
        //   { prop: 'date', label: '日期', width: 180, align: 'center', sortable: true },
        //   { prop: 'name', label: '姓名', width: 180, align: 'left', sortable: false },
        //   { prop: 'address', label: '地址', align: 'right' }
      ],
    };
  },
  created() {
    // const data = [
    //   { name: "张三", sex: "男" },
    //   { name: "李四", sex: "女" },
    // ];
    // this.tableData = data;
    // const uniqueKeys = [...new Set(data.flatMap((obj) => Object.keys(obj)))];
    // console.log(uniqueKeys);
    // uniqueKeys.forEach((item) => {
    //   this.cols.push({ prop: item, width: 160, align: "center" });
    //   // item.prop = item
    //   // item.width = 160
    //   // item.align='center'
    // });
  },
  watch: {
    id: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        if (newnew) {
          this.queryParams.id = newnew;
          // this.form.id=newnew

          this.getList();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    tableNameExp() {
      if (!this.formData.tableName) {
        return;
      }
      checkIfTableExists({ tableName: this.formData.tableName }).then(
        (response) => {
          if (response.code == 601) {
            this.$alert("表已存在，无需创建，如果重新创建请删除该表", "提示", {
              confirmButtonText: "确定",
              showConfirmButton: false,
            });
          }
        }
      );
    },
    opentagkey() {
      let list = [];
      this.cols.forEach((item) => {
        // if (item.field_name != "id") {
        list.push({ ...item });
        // }
      });
      this.formData.libraryIdList = list;
      this.tagkeyVisible = true;
    },
    // 取消按钮
    cancel() {
      this.tagkeyVisible = false;
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    getList() {
      this.openLoading();
      queryData(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.tableData = response.data.tableData;
        this.cols = response.data.cols;
        this.total = response.data.total;
        const uniqueKeys = [
          ...new Set(this.tableData.flatMap((obj) => Object.keys(obj))),
        ];

        console.log(uniqueKeys);

        uniqueKeys.forEach((item) => {
          this.columns.push({ prop: item, width: 160, align: "center" });
          // item.prop = item
          // item.width = 160
          // item.align='center'
        });
      });
    },
    submit() {
      let obj = {
        tableName: this.formData.tableName,
        comment: this.formData.comment,
        cols: this.formData.libraryIdList,
      };
      createTableInfo(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("表创建成功");
          this.tagkeyVisible = false;
        } else {
          this.$modal.msgSuccess("表创建失败");
          this.tagkeyVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow-x: hidden;
}
</style>